<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<!--标签插件-->
		<link rel="stylesheet" href="js/jquery-tags-input/jquery.tagsinput.min.css">
		<link href="css/style.min.css" rel="stylesheet">

		<link href="css/animate.css" rel="stylesheet">
	</head>

	<body>
		<div class="container-fluid p-t-15">

			<div class="row">
				<div class="col-lg-12">
					<div class="card">
						<div class="card-body">

							<form action="#!" method="post" class="row">
								<!-- <div class="col-md-5 col-md-offset-3"> -->
								<div class="col-md-5">
									<div class="form-group col-md-12">
										<label for="proId">商品ID</label>
										<input type="text" class="form-control" id="proId" name="proId" value=""
											   placeholder="请输入商品ID" readonly/>
									</div>
									<div class="form-group col-md-12">
										<label for="proName">商品名称</label>
										<input type="text" class="form-control" id="proName" name="proName" value=""
											placeholder="请输入商品名称" />
									</div>
									<div class="form-group col-md-12">
										<label for="proPrice">商品单价</label>
										<input type="number" class="form-control" id="proPrice" name="proPrice" value=""
											   placeholder="请输入商品单价" />
									</div>
									<div class="form-group col-md-12">
										<label for="productType">商品类别</label>
										<select id="productType" class="form-control">
											<option value=""></option>
										</select>
									</div>
									<div class="form-group col-md-12">
										<label for="proDesc">描述</label>
										<textarea class="form-control" id="proDesc" name="proDesc" rows="5" value=""
											placeholder="请输入商品描述"></textarea>
									</div>
									<div class="form-group col-md-12">
										<button onclick="modPro()" type="button" class="btn btn-primary ajax-post"
											target-form="add-form">修改商品</button>
									</div>
								</div>
								
							</form>

						</div>
					</div>
				</div>

			</div>

		</div>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<!--标签插件-->
		<script src="js/jquery-tags-input/jquery.tagsinput.min.js"></script>
		<script type="text/javascript" src="js/main.min.js">

			<!--消息提示-->
			<script src="js/bootstrap-notify.min.js"></script>
		<script type="text/javascript" src="js/lightyear.js"></script>
		<script>
			$(function(){
				loadProTypes();
			})

			/**
			 * 显示商品所有类别
			 */
			function loadProTypes(){
				let param = {
					"page": 1,
					"size": 100000
				}
				//请求类别
				$.getJSON("productTypes/queryByPage", param, function(rvo){
					console.log("productTypes/queryByPage: ", rvo);

					//清理下拉列表内容
					$("#productType").empty();
					//遍历添加类别信息到下拉列表
					for(let pt of rvo.content.content){
						//拼接行选项
						let row = `<option value="${pt.typeId}">${pt.typeName}</option>`;
						//添加到下拉列表
						$("#productType").append(row);
					}

					//加载要修改的商品信息
					loadModPro();
				});
			}

			/**
			 * 获取sessionStorage中要修改的商品id，根据id加载要修改的商品信息
			 */
			function loadModPro(){
				let proId = sessionStorage.getItem("modProId");
				if(!proId){
					lightyear.notify("查无要修改的商品", "danger", 1000);
					location.href = "pro_list.html";
					return;
				}
				//从数据库，根据ID查询商品
				$.getJSON("products/queryById/"+proId, function(rvo){
					console.log("products/queryById/: ", rvo);
					if(rvo.code != 1){
						lightyear.notify(rvo.msg, "danger", 1000);
						location.href = "pro_list.html";
						return;
					}

					// 显示要修改的对象到页面
					showModInfo(rvo.content);

				})

			}

			/**
			 * 显示要修改的对象到页面
			 */
			function showModInfo(modPro){
				$("#proId").val(modPro.proId);
				$("#proName").val(modPro.proName);
				$("#proPrice").val(modPro.proPrice);
				$("#proDesc").val(modPro.proDesc);
				$("#productType").val(modPro.productTypes.typeId);
			}

			function modPro(){
				//1- 获取修改商品的信息
				let proId = $("#proId").val();
				let proName = $("#proName").val();
				let proPrice = $("#proPrice").val();
				let proDesc = $("#proDesc").val();
				let ptId = $("#productType").val();
				//2- 封装提交参数
				let param = {
					"proId": proId,
					"proName": proName,
					"proPrice": proPrice,
					"proDesc": proDesc,
					"productTypes.typeId": ptId
				}

				//3- 修改添加
				$.getJSON("products/edit", param, function(rvo){
					console.log("products/edit", rvo);
					//修改失败
					if(rvo.code != 1){
						lightyear.notify(rvo.msg, "danger", 1000);
						return;
					}

					//修改成功，跳转到页面显示
					location.href = "./pro_list.html";

				});

			}

		</script>
	</body>
</html>
